<template>
    <div>
        <el-container>
            <el-aside width="420px" style="border: 1px solid #eee;height: 100vh; background-color: #D3DCE6;">
                <div class="myTree">
                  <el-input
                    placeholder="输入关键字进行过滤"
                    v-model="filterText"/>
                  <el-tree default-expand-all :props="defaultProps" :data="tableData"  @node-click="handleNodeClick" :filter-node-method="filterNode" ref="tree">
                    <span class="custom-tree-node" slot-scope="{ data }">
                      <span>
                        <i  v-if="data.id>4" class="el-icon-document" style="font-size:20px color:red"/>
                        <span :style="{color:data.id<5?'#74500d':''}"> {{ data.name }}</span>
                      </span>
                    </span>
                  </el-tree>
                  </div>
            </el-aside>
            <el-container  style="border: 1px solid #eee;background:rgb(82, 86, 89)">
                <iframe :src="pdfSrc"  frameborder="0" width="100%" height="100%" ></iframe>
            </el-container>
        </el-container>
    </div>
</template>
 
<script>
 
  export default {
    name: "IndustryInformation",
    watch:{
      filterText(val){
        this.$refs.tree.filter(val);
      }
    },
    data(){
      return {
        filterText:'',//过滤
        currentPage: 0, // pdf文件页码
        pageCount: 0, // pdf文件总页数
        fileType: 'pdf', // 文件类型
        pdfSrc: '',  // pdf文件地址
        defaultProps: {
          children: 'children',
          label: 'name'
        },
 
        tableData: [{
          id: 1,
          name: '目录整理',
          children:[
            {
              id: 2,
              name: '一张图接口文档',
              children:[
                {
                  id: 21,
                  name: '一张图接口文档1_v1.2',
                  src: '/static/一张图接口文档1_v1.2.pdf',
                },
                {
                  id: 13,
                  name: '一张图接口文档2',
                  src: '/static/一张图接口文档2.pdf',
                }
              ]
            },
            {
              id: 3,
              name: '陈老师文件',
              children:[
                {
                  id: 7,
                  name: '基础数据一张图空间信息服务接口说明文档',
                  src: '/static/基础数据一张图空间信息服务接口说明文档.pdf',
                },
                {
                  id: 8,
                  name: '一张图服务文档_发布的URL',
                  src: '/static/一张图服务文档_发布的URL.pdf',
                },
                {
                  id: 9,
                  name: '一张图空间信息服务接口文档_v1.2',
                  src: '/static/一张图空间信息服务接口文档_v1.2.pdf',
                }
              ]
            },
            {
              id: 4,
              name: '元图接口文档',
              children:[
                {
                  id: 7,
                  name: 'geoserver服务接口示例',
                  src: '/static/geoserver服务接口示例.pdf',
                },
                {
                  id: 8,
                  name: '冬奥赛区DEM高程地图服务接口说明',
                  src: '/static/冬奥赛区DEM高程地图服务接口说明.pdf',
                },
                {
                  id: 9,
                  name: '基础信息一张图_历史极值服务接口文档',
                  src: '/static/基础信息一张图_历史极值服务接口文档.pdf',
                },
                {
                  id: 10,
                  name: '一张图机器清单',
                  src: '/static/一张图机器清单.pdf',
                },
                {
                  id: 11,
                  name: '一张图-全国山脉数据服务接口说明',
                  src: '/static/一张图-全国山脉数据服务接口说明.pdf',
                },
                {
                  id: 12,
                  name: '一张图行政区划（全国加九段线）服务接口说明',
                  src: '/static/一张图行政区划（全国加九段线）服务接口说明.pdf',
                },
                {
                  id: 13,
                  name: '一张图行政区划服务接口说明',
                  src: '/static/一张图行政区划服务接口说明.pdf',
                }
              ]
            }
          ]}]
      }
    },
    methods:{
      handleNodeClick(data) {
        this.pdfSrc = data.src;
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      }
    }
  }
</script>
 
<style scoped>
    .myTree /deep/ .el-tree {
        position: relative;
        cursor: default;
        color: #606266;
        background-color: #D3DCE6;
    }
</style>